<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
		<script src="./layui/layui.js"></script>
		<script type="text/javascript" src="js/global.js"></script>
		<script src="js/xadmin.js"></script>
		<link rel="stylesheet" href="./js/soulTable.css" media="all" />
	</head>

	<body>

		<div class="layui-form-item" style="margin-top: 20px" onsubmit="false">
			<!-- <div class="layui-form-item">
				<label class="layui-form-label">部门名</label>
				<div class="layui-input-inline">
					<input class="layui-input" name="sname" id="sname" lay-verify="required" />
				</div>
				<button class="layui-btn" id="serach" onclick="onc()" data-type="reload" ">搜索</button>
			</div> -->
		</div>
		<!-- <button type=" button" lay-submit="" class="layui-btn layui-btn-warm" id="delAll">批量删除部门</button> -->
		<table id="demo" lay-filter="test"></table>
		<script type="text/html" id="barDemo">
			<!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="modules">模块</a>-->
		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="trees">设置权限</a>
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

		</script>

		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn" lay-event="add">添加</button>
				<button type=" button" lay-submit="" class="layui-btn layui-btn-danger" lay-event="delAll"
					id="delAll">批量删除部门</button>
			</div>
		</script>

		<script>
			layui.config({
				base: 'ext/' //所需文件文件夹
			}).extend({
				tableChild: 'tableChild' //加载所需文件夹下具体文件
			});
			layui.use(['table', 'form', 'jquery', 'tableChild'], function() {
				var table = layui.table;
				var $ = layui.jquery; //引入jquery
				var form = layui.form;
				var tableChild = layui.tableChild;

				//解决跨域
				$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
					options.xhrFields = {
						withCredentials: true
					}
				})
				//第一个实例
				table.render({
					elem: '#demo',
					toolbar: '#toolbarDemo' //开启头部栏工具
						,
					url: globalData.server + './section/getAllSections' //数据接口
						,
					page: true //开启分页
						,
					/* totalRow: true, // 是否开启最后一行*/
					method: 'POST',

					id: 'idTest',
					cols: [
						[{ //开启父表格复选框
								type: "checkbox",
								fixed: "left",
								width: 50
							},
							{
								title: '<span><i class="layui-icon layui-icon-face-smile" style="font-size: 20px; color: #55aa7f;"></i> </span>', //表格左上角图标
								width: 50,
								icon: ['layui-icon layui-icon-triangle-r', //折叠-图标
									'layui-icon layui-icon-triangle-d' //展开-图标
								],
								collapse: true, //手风琴-展开方式
								children: [{
									title: function(row) {
										var id = row.id
										console.log("当前行id:" + id)
										globalData.setIdsid(id)
										var globasid = globalData.getIdsid()
										console.log("h5缓存中的部门id:" + globasid)
										
										return '<span style="color: #FFB800">' + row.sname +
											"详情" +
											'</span>'
									}, //展开后导航字体
									url: globalData.server + 'section/getAllSectionBySid' + '?ids=' +
										globalData.getIdsid(), //子表格数据源
									/* height: 200, //子表格高度 */
									/* toolbar: '<div><a class="layui-btn layui-btn-sm" lay-event="reload">刷新</a> <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="update">更新父表（朝代+1）</a> <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除父表当前行</a> <a class="layui-btn layui-btn-sm layui-btn-warm" lay-event="close">关闭子表</a></div>', */
									/*导出excell- toolbar: '<div><a class="layui-btn layui-btn-sm" lay-event="exportExcel">导出</a></div>', */
									cols: [
										[{
												type: 'checkbox',
												fixed: 'left'
											},
											{
												field: 'id',
												title: 'id',
												sort: true,
												filter: true
											},
											{
												field: 'loginName',
												title: '姓名',
												sort: true
											},
											{
												field: 'protectMtel',
												title: '手机号'
											}, {
												field: 'protectEmail',
												title: '邮箱'
											}
											/* ,
												{
							{
																							title: '预留表格',
																							width: 156,
																							templet: '#childBar'
																						} */

										]
									],
									done: function() {

									}
								}],
								childOpen: function(obj) {
									/* layer.msg('玩命卖萌中', function(){
									//关闭后的操作
									}); */
									// obj 当前行对象
									// 可从中调用 data/tr/update/del
									console.log("h6" + globalData.getIdsid()),
										obj.tr.css({
											'background': '#5FB878'
										}).siblings().removeAttr('style')
									console.log(obj.tr) //得到当前行元素对象
									console.log(obj.data) //得到当前行数据
									var d = obj.data.id; //获取当前部门id
									console.log("当前部门id：" + d)
								},
								childClose: function(obj) {
									// 行关闭事件
									// obj 当前行对象
									obj.tr.removeAttr('style')
									console.log(obj.tr) //得到当前行元素对象
									console.log(obj.data) //得到当前行数据
									//obj.del(); //删除当前行
									//obj.update(fields) //修改当前行数据
									window.location.reload(); //当窗口关闭后刷新页面
									
								}
							},
							{
								field: 'id',
								title: 'id',

								sort: true
							},
							{
								field: 'sname',
								title: '部门名称'

							},
							{
								field: 'sintroduce',
								title: '部门描述'

							},
							/* {
								field: 'countsid',
								title: '人数',
								sort: true
								totalRowText: '合计'
							} */
							, {
								field: 'right',
								title: '操作',
								width: 200,
								toolbar: '#barDemo',
								align: 'center'

							}


						]
					],
					done: function() {
						tableChild.render(this)
					}

				});

				$('#serach').on('click', function() {
					var sname = $("#sname").val(); //上面搜索框的id
					table.reload('idTest', {
						where: { //请求参数
							'sname': sname,
						}
					});
				});


				//监听头部工具栏
				table.on('toolbar(test)', function(obj) {
					switch (obj.event) {
						case 'add': //添加
							layer.open({ //打开一个页面
								type: 2, //在当前页面打开一个页面
								area: ['500px', '550px'], //页面宽高
								content: 'section-add.html', //页面地址
								title: '添加角色', //打开页面标题
								end: function() {
									window.location.reload(); //当窗口关闭后刷新页面
								}
							});
							break;
						case 'delAll': //批量删除
							var checkStatus = table.checkStatus('idTest');
							var ids = [];
							$(checkStatus.data).each(function(i, o) { //o即为表格中一行的数据
								ids.push(o.id);
							});
							if (ids.length < 1) {
								layer.msg('无选中项');
								return false;
							}
							ids = JSON.stringify(ids);

							var d = { //选中的id，json格式
								'ids': ids,
							}; //表单中的数据，定义一个对象来接收
							var url = globalData.server + "./section/delAllSection";
							$.post(url, d, function(data) {
								layer.confirm('确定删除所选中部门？', function(index) {
									console.log(data);
									if (data.count > 0) {
										layer.msg(data.msg, {
											icon: 6
										});

										window.reloadView = function() {
											window.location.reload();
										}

										setInterval('reloadView()', 1000);
										//window.location.reload(); //当窗口关闭后刷新页面

									} else {
										layer.msg(data.msg, {
											icon: 6
										});
										//globalData.loginOutIds();
									}
								}, "json");
							});
							break;
					};
				});
				//监听工具条
				table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					if (obj.event === 'del') { //删除
						layer.confirm('确定删除此部门？', function(index) {
							var url = globalData.server + './section/delSection'; //请求地址
							$.post(url, {
								id: obj.data.id,
							}, function(data) {
								console.log(data)
								if (data > 0) {
									console.log('删除成功');
									window.location.reload(); //刷新页面
								} else {
									layer.msg(data.msg, {
										icon: 2
									});
								}
							}, "json");
						});
					} else
						//				if (obj.event === 'modules') { //模块
						//					layer.open({//打开一个页面
						//						type : 2,//在当前页面之上以弹框的形式，展示编辑页面
						//						area : [ '500px', '550px' ],//页面宽高
						//						content : 'roles-modules-remove.html',//页面所在位置
						//						title : '您正在编辑角色编号为' + obj.data.id + '的模块信息',
						//						success : function(layero, index) {
						//							var body = layer.getChildFrame('body', index);
						//							body.contents().find("#userid").val(obj.data.id);
						//						},
						//						end : function() {
						//							window.location.reload();//当窗口关闭后刷新页面
						//						}
						//					});
						//				}else 
						if (obj.event === 'trees') { //模块 roles-modules-remove-tree.html
							layer.open({ //打开一个页面
								type: 2, //在当前页面之上以弹框的形式，展示编辑页面
								area: ['500px', '550px'], //页面宽高
								content: 'roles-modules-remove-tree.html', //页面所在位置
								title: '您正在编辑部门编号为' + obj.data.id + '的模块信息',
								success: function(layero, index) {
									var body = layer.getChildFrame('body', index);
									body.contents().find("#userid").val(obj.data.id);
									body.contents().find("#sintroduce").val(obj.data.sintroduce);
								},
								end: function() {
									window.location.reload(); //当窗口关闭后刷新页面
								}
							});
						} else if (obj.event === 'edit') { //编辑
						layer.open({ //打开一个页面
							type: 2, //在当前页面之上以弹框的形式，展示编辑页面
							area: ['500px', '550px'], //页面宽高
							content: 'section-edit.html', //页面所在位置
							title: '您正在编辑部门编号为' + obj.data.id + '的信息',
							success: function(layero, index) {
								var body = layer.getChildFrame('body', index);
								body.contents().find("#id").val(obj.data.id);
								body.contents().find("#sname").val(obj.data.sname);
								body.contents().find("#sintroduce").val(obj.data.sintroduce);
								console.log(obj.data.sintroduce)
							},
							end: function() {
								window.location.reload(); //当窗口关闭后刷新页面
							}
						});
					}
				});

			});
		</script>
	</body>

</html>
